<style include="cr-shared-style shimless-rma-shared">
  .input-row {
    margin-bottom: 30px;
  }

  .input-holder {
    align-items: center;
    display: flex;
  }

  cr-button {
    border-radius: 20px;
  }

  .sku-warning {
    color: gray; /* TODO(joonbug): Update cros colors */
    display: flex;
    max-width: 400px;
  }

  iron-icon {
    height: 10px;
    width: 50px;
  }

  cr-input {
    --cr-input-error-display: none;
    margin-inline-end: 20px;
  }

  select {
    margin-inline-end: 20px;
  }
</style>

<base-page orientation="column">
  <div slot="header">
    <h1>[[i18n('confirmDeviceInfoTitle')]]</h1>
    <div>[[i18n('confirmDeviceInfoInstructions')]]</div>
  </div>
  <div slot="body">
    <div class="input-row">
      <label id="serialNumberLabel" class="cr-form-field-label">
        [[i18n('confirmDeviceInfoSerialNumberLabel')]]
      </label>
      <div class="input-holder">
        <cr-input id="serialNumber" placeholder="Enter Serial Number"
            value="{{serialNumber_}}" aria-labelledby="serialNumberLabel"
            disabled="[[allButtonsDisabled]]">
        </cr-input>
        <cr-button id="resetSerialNumber"
            on-click="onResetSerialNumberButtonClicked_"
            disabled="[[disableResetSerialNumber_]]">
          [[i18n('confirmDeviceInfoResetButtonLabel')]]
        </cr-button>
      </div>
    </div>
    <div class="input-row">
      <label id="dramPartNumberLabel" class="cr-form-field-label">
        [[i18n('confirmDeviceInfoDramPartNumberLabel')]]
      </label>
      <div class="input-holder">
        <cr-input
            id="dramPartNumber"
            placeholder=
                "[[i18n('confirmDeviceInfoDramPartNumberPlaceholderLabel')]]"
            value="{{dramPartNumber_}}"
            aria-labelledby="dramPartNumberLabel"
            disabled="[[allButtonsDisabled]]">
        </cr-input>
        <cr-button id="resetDramPartNumber"
            on-click="onResetDramPartNumberButtonClicked_"
            disabled="[[disableResetDramPartNumber_]]">
          [[i18n('confirmDeviceInfoResetButtonLabel')]]
        </cr-button>
      </div>
    </div>
    <div class="input-row">
      <label id="regionLabel" class="cr-form-field-label">
        [[i18n('confirmDeviceInfoRegionLabel')]]
      </label>
      <div class="input-holder">
        <select id="regionSelect" class="md-select"
            on-change="onSelectedRegionChange_" aria-labelledby="regionLabel"
            disabled="[[allButtonsDisabled]]">
          <template is="dom-repeat" items="[[regions_]]" as="region">
            <option value="[[region]]">
              [[region]]
            </option>
          </template>
        </select>
        <cr-button id="resetRegion" on-click="onResetRegionButtonClicked_"
            disabled="[[disableResetRegion_]]">
          [[i18n('confirmDeviceInfoResetButtonLabel')]]
        </cr-button>
      </div>
    </div>
    <div class="input-row">
      <label id="whiteLabelLabel" class="cr-form-field-label">
        [[i18n('confirmDeviceInfoWhiteLabelLabel')]]
      </label>
      <div class="input-holder">
        <select id="whiteLabelSelect" class="md-select" 
            on-change="onSelectedWhiteLabelChange_"
            aria-labelledby="whiteLabelLabel" disabled="[[allButtonsDisabled]]">
          <template is="dom-repeat" items="[[whiteLabels_]]" as="whiteLabel">
            <option value="[[whiteLabel]]">
              [[whiteLabel]]
            </option>
          </template>
        </select>
        <cr-button id="resetWhiteLabel" on-click="onResetWhiteLabelButtonClicked_"
            disabled="[[disableResetWhiteLabel_]]">
          [[i18n('confirmDeviceInfoResetButtonLabel')]]
        </cr-button>
      </div>
    </div>
    <div>
      <label id="skuLabel" class="cr-form-field-label">
        [[i18n('confirmDeviceInfoSkuLabel')]]
      </label>
      <div class="input-holder">
        <select id="skuSelect" class="md-select"
            on-change="onSelectedSkuChange_" aria-labelledby="skuLabel"
            disabled="[[allButtonsDisabled]]">
          <template is="dom-repeat" items="[[skus_]]" as="sku">
            <option value="[[sku]]">
              [[sku]]
            </option>
          </template>
        </select>
        <cr-button id="resetSku" on-click="onResetSkuButtonClicked_"
            disabled="[[disableResetSku_]]">
          [[i18n('confirmDeviceInfoResetButtonLabel')]]
        </cr-button>
      </div>
    </div>
    <div class="sku-warning">
      <iron-icon icon="shimless-icon:warning"></iron-icon>
      [[i18n('confirmDeviceInfoSkuWarning')]]
    </div>
  </div>
</base-page>
